<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li><a href="#1">有序列表</a></li>
        <li><a href="#2">无序列表</a></li>
        <li><a href="#3">自定义列表</a></li>
    </ul>
    <!-- 有序列表 -->
    <p id="1"><a href="#">有序列表</a></p>
    <ol type="1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <ol type="a">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <ol type="A">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <ol type="i">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <ol type="I">
        <li>1</li>
        <li>2</li>
        <li>
            <ol type="1">
                <li>3.1</li>
                <li>3.2</li>
                <li>3.3</li>
            </ol>
        </li>
        <li>4</li>
    </ol>

    <!-- 无序列表 -->
    <p id="2"><a href="#">无序列表</a></p>
    <ul type="disc">
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>
    <ul type="circle">
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>
    <ul type="square">
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>
    <ul type="none">
        <li>新闻1</li>
        <li>
            <ul type="circle">
                <li>新闻1</li>
                <li>新闻2</li>
                <li>新闻3</li>
            </ul>
        </li>
        <li>新闻3</li>
    </ul>

    <!-- ul>li*4>a[herf=#]父元素指向子元素形式快速创建 -->
    <ul>
        <li><a href="" herf="#"></a></li>
        <li><a href="" herf="#"></a></li>
        <li><a href="" herf="#"></a></li>
        <li><a href="" herf="#"></a></li>
    </ul>

    <!-- 自定义标签 -->
    <p id="3"><a href="#">自定义列表</a></p>

    <dl>
        <dt>御巫</dt><!--dt表示类似列表的标题-->
        <dd>大日女之御巫</dd><!--dd表示列表项-->
        <dd>二贵子之御巫</dd>
        <dt>码丽丝</dt>
        <dd>红心加密</dd>
        <dd>白棋捆缚</dd>
    </dl>
</body>

</html>